<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="header">{{.title}}</div>

    <div class="nav">
        <div class="up"><i class="layui-icon layui-icon-up"></i> 上级目录</div>
        <div class="dir"></div>

        <ul>
            <li id="v"><i class="layui-icon layui-icon-cols"></i></li>
            <li id="h"><i class="layui-icon layui-icon-app"></i></li>
        </ul>
    </div>

    <div class="h" id="content">
        <!-- <dl>
            <dt><i class="layui-icon layui-icon-export"></i></dt>
            <dd>测试文件夹</dd>
        </dl>
        <dl>
            <dt><i class="layui-icon layui-icon-video"></i></dt>
            <dd>视频文件</dd>
        </dl> -->
    </div>
    <div id="player">
        <div id="chplayer" style="width: 800px;"></div>
    </div>
</body>
</html>
<script src="/static/layui/layui.js"></script>
<script src="/static/chplayer/chplayer.js"></script>
<script>
layui.use(['jquery', 'layer'], function(){
    var $ = layui.jquery
    ,layer = layui.layer;

    window.getDir = function (_dir) {
        if (_dir == undefined) {
            path = _dir = '';
        }

        $('.dir').empty().append(_dir);
        // 获取目录和文件
        $.getJSON('/getdir?dir=' + _dir, function(json) {
            var list = '', i;
            for (i in json.paths) {
                list += '<dl data-path="' + json.paths[i] + '"><dt><i class="layui-icon layui-icon-export"></i></dt><dd>' + json.paths[i] + '</dd></dl>'; 
            }
            for (i in json.files) {
                list += '<dl data-file="' + json.files[i] + '"><dt><i class="layui-icon layui-icon-video"></i></dt><dd>' + json.files[i] + '</dd></dl>'; 
            }
            $('#content').empty().append(list);
        });
    }

    getDir()

	// 上级目录
	$('.up').on('click', function(){
		var dir = $('.dir').text();
		var dirCell = dir.split('\\');
        if (dirCell.length > 2) {
            getDir(dir.substr(0, dir.length - dirCell[dirCell.length - 1].length - 1));
        } else {
            getDir();
        }
	});

	$('#content').on('click', 'dl', function(){
		var path = $(this).data('path'), file = $(this).data('file');

		// 进入下一级目录
		if (path) { 
			getDir($('.dir').text() + '\\' + path);
            return;
		}

		// 播放flv文件
		if (file && file.split('.').pop().toLowerCase() == 'mp4') {
			var videourl = "\\data" + $('.dir').text() + '\\' + file;

            var ch = new chplayer({
                container: '#chplayer',
                video: videourl,
            });

			layer.open({
				type: 1,
				title: false,
				content: $('#player'),
                zIndex: 99,
				cancel: function(index, layero) { ch.removeChild(); }
			});
		}
	});

    // 列表显示方式
    $('#v').on('click', function() { $('#content').removeClass().addClass('v'); });
    $('#h').on('click', function() { $('#content').removeClass().addClass('h'); });
});
</script> 